<template>
  <div class="pedding">
    <div class="pos_wrap">
      <div v-show="props.isAccurate">
        <div class="pos" v-show="props.startPos">起点坐标:({{ props.startPos }})</div>
        <div class="pos" v-show="props.currentPos">当前坐标:({{ props.currentPos }})</div>
        <div class="tips" v-if="isClose2End">已靠近终点，请点击结束测绘</div>
      </div>
      <div class="pos_wrap holder" v-show="!props.isAccurate && props.isDrawing">
        当前定位信号差，请移动到开阔地带
      </div>
    </div>


    <div class="button" @click="handleClick" :class="{ mapping: props.isDrawing }">
      <img :src="buttonImg" alt="">
      <span>{{ buttonText }}</span>
    </div>
    <div class="bottom" v-show="props.isDrawing">
      <section>
        <div class="value">{{ props.distance }}</div>
        <div class="name">测绘距离(km)</div>
      </section>
      <section>
        <div class="value">{{ timeComp }}</div>
        <div class="name">测绘时常</div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive, ref, onUnmounted, defineExpose } from "vue"
const startIcon = require('@/assets/img/start_mapping.png')
const endIcon = require('@/assets/img/end_mapping.png')
import { $toast } from '@/components/toast/index'
import { getLocation } from "@/utils/wxutil"

const props = defineProps({
  startPos: {
    default() {
      return ''
    }
  },
  currentPos: {
    default() {
      return ''
    }
  },
  distance: Number | String,
  isAccurate: {
    required: true
  },
  isDrawing: {
    required: true
  }
})

const emits = defineEmits(['start', 'stop', 'contenue'])

const isClose2End = computed(() => {
  if (isTooShort.value)
    return false
  const [sLa, sLo] = props.startPos.split(',').map(v => Number(v))
  const [cLa, cLo] = props.currentPos.split(',').map(v => Number(v))
  if (!sLa || !sLo || !cLa || !cLo) return false;
  if (Math.floor(Math.abs(sLa - cLa) * 100000) / 100000 < 0.0001 && Math.floor(Math.abs(sLo - cLo) * 100000) / 100000 < 0.0001)
    return true;
  return false;
})

const buttonText = computed(() => {
  return !props.isDrawing ? '开始测绘' : '结束测绘'
})

const buttonImg = computed(() => {
  return !props.isDrawing ? startIcon : endIcon
})

let isTooShort = ref(true);

const timing = ref(0)

let timeParams = reactive({
  currentTime: '',
  startTime: '',
  interval: null
})

const timeComp = computed(() => {
  let dur = (timeParams.currentTime || timeParams.startTime) - timeParams.startTime;
  let h = parseInt(dur / 3600000)
  dur -= h * 3600000
  let m = parseInt(dur / 60000)
  dur -= m * 60000
  let s = parseInt(dur / 1000)
  if (h < 10) {
    h = `0${h}`
  }
  if (m < 10) {
    m = `0${m}`
  }
  if (s < 10) {
    s = `0${s}`
  }
  return `${h}:${m}:${s}`
})

const handleClick = () => {
  if (!props.isDrawing) {
    setTimeout(() => {
      isTooShort.value = false
    }, 60000)
    timeParams.interval = setInterval(() => {
      timeParams.currentTime = new Date().getTime();
    }, 1000)
    timeParams.startTime = new Date().getTime();
    return emits('start')
  }
  if (isClose2End.value)
    return emits('stop', true)
  emits('pause')
  const text = isTooShort.value ? '测绘时长小于1分钟，现在结束将不保存测绘，数据确认结束本次测绘？' : '测绘未完成，现在结束将不保存测绘数据，确认结束本次测绘？'
  $toast({
    text,
    title: '异常结束提醒',
    /* handleRightButton:() => {
      emits('stop', false)
    } */
  })
    .then(res => {
      if (res === 'clickRight') {
        isTooShort.value = true;
        emits('stop', false)
      } else {
        emits('contenue', false)
      }
    })
}
onUnmounted(() => {
  if (timeParams.interval) {
    clearInterval(timeParams.interval)
    timeParams = null
  }
})

defineExpose ({
  isClose2End
})
</script>

<style lang="scss" scoped>
.pedding {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  padding-bottom: 1.46rem;
  position: relative;
}

.pos_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;

  &.holder {
    font-size: 0.28rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #FF5353;
  }
}

.pos {
  margin-bottom: 0.1rem;
  font-size: 0.28rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #585858;
  line-height: 0.4rem;
}

.tips {
  font-size: 0.28rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #FF9231;
  line-height: 0.4rem;
}

.button {
  width: 2.11rem;
  height: 2.11rem;
  background: #3B60E6;
  box-shadow: 0rem 0.1rem 0.32rem 0rem rgba(59, 96, 230, 0.3);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  &.mapping {
    background: #FF5353;
    box-shadow: 0rem 0.1rem 0.32rem 0rem rgba(255, 83, 83, 0.3);
  }

  img {
    height: 0.6rem;
    width: 0.6rem;
    margin-bottom: 0.15rem;
  }

  span {
    font-size: 0.3rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 0.42rem;

  }

}

.bottom {
  position: absolute;
  bottom: 0.58rem;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;


  section {
    div {
      font-size: 0.24rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #585858;
      line-height: 0.33rem;
      text-align: center;
    }

    &:nth-of-type(1) {
      .value {
        color: #3B60E6;
      }
    }

    &:nth-of-type(2) {
      .value {
        color: #FF5353;
      }
    }
  }
}
</style>